<template>
	<view class="patient-content">
		<view class="patient-search">
			<view class="patient-search-box">
				<text class="cuIcon-search"></text>
				<input class="input-search" type="text" value="" @input="inputSearch" placeholder="输入患者姓名/电话" />
			</view>
		</view>
		<view class="patient-box">
			<s-pull-scroll ref="pullScroll" :back-top="true" :pullDown="pullDown" :pullUp="loadData">
			  <view class="patient-box-list">
			  	<view class="patient-box-item" v-for="(item, index) in dataList" :key="item.id" @tap="patient_details(item.id)">
			  		<view class="patient-box-item-top uni-flex">
			  			<view class="patient-item-portrait">
			  				<image src="/static/public/portrait01.png" mode="scaleToFill"></image>
			  			</view>
			  			<view class="patient-item-information">
			  				<view class="uni-flex">
			  					<text class="nameAge">{{item.customerName}} - {{item.customerAge}}岁</text>
			  					<text class="medicalRecordNumber">{{item.medicalRecordNumber}}</text></view>
			  				<view>{{item.customerPhone}}</view>
			  			</view>
			  		</view>
			  		<view class="patient-box-item-bottom">
			  			<text>来源：</text><text>{{item.oneChannel}} - {{item.twoChannel}} - {{item.thrChannel}}</text>
			  		</view>
			  	</view>
			  </view>
			</s-pull-scroll>
		</view>
	</view>
</template>

<script>
	import sPullScroll from '@/components/s-pull-scroll/index.vue';
	import {customerList} from '@/static/api/patient.js'
	export default {
		components: {
		  sPullScroll
		},
		data() {
			return {
				dataList:[],	// 存放患者列表数组
				parame:{
					arrivalTime:'',	// 页面顶部或底部记录的到店时间
					id:'',			// 客户id
					keyword:'',		// 查询关键字，根据患者姓名或电话查询
					limit:'',		// 每页显示记录数 为空则后台默认10条
					page:'',		// 当前页 为空则后台默认第一页
					refreshType:'',	// up:上拉,down:下拉
					selectedDept:''	// 选择的门诊
				}
			}
		},
		onReady(){
			let _this = this
			//	取出存在 cookie 里面 abbreviation(门店缩写)
			uni.getStorage({
			    key: 'userInfo',
			    success: function (res) {
					_this.parame.selectedDept = res.data.outpatientShrink;
					//	默认请求最新的数据
					customerList(_this.parame).then((res)=>{
						_this.dataList = res.data;
					}).catch((err)=>{});
			    }
			});
		},
		methods: {
			//	新建患者
			onNavigationBarButtonTap(val) {
                if (val.index == 0) {
                    uni.navigateTo({
						url: `/pages/index/patient/patient-add`,
					})
                }
			},
			//	患者详情页
			patient_details(ids){
				uni.navigateTo({
					url: `/pages/index/patient/patient-details?id=`+ids+``,
				})
			},
			//	下拉刷新
			pullDown (pullScroll) {
				//	在这里判断	当没有数据的时候 arrivalTime 为空 缺少参数会报错
				if(this.dataList.length > 0){
					this.customerLoad('down',pullScroll);
				}else{
					//	设置延迟  优化用户UI体验
					setTimeout(() => {
						pullScroll.finish();
					}, 500);
				}
			},
			//	上拉加载
			loadData (pullScroll) {
				//	在这里判断	当没有数据的时候 arrivalTime 为空 缺少参数会报错
				if(this.dataList.length > 0){
					this.customerLoad('up',pullScroll);
				}else{
					//	设置延迟  优化用户UI体验
					setTimeout(() => {
						pullScroll.finish();
					}, 500);
				}
			},
			//	刷新
			customerLoad(type,pullScroll){
				//	判断操作 up(上拉) or  down(下拉)
				if(type == 'up'){
					this.parame.refreshType = 'up';
					this.parame.arrivalTime = this.dataList[this.dataList.length-1].arrivalTime
				}else if(type == 'down'){
					this.parame.refreshType = 'down';
					this.parame.arrivalTime = this.dataList[0].arrivalTime
				}
				//	设置延迟  优化用户UI体验
				setTimeout(() => {
					//	请求数据
				    customerList(this.parame).then((res)=>{
						console.log(res.data);
						//	判断有无数据
						if(res.data !== '' && res.data !== undefined){
							//	判断状态  如果是上拉则往 dataList 后面添加数据 下拉则反之
							if(type == 'up'){
								this.dataList = this.dataList.concat(res.data);
							}else if(type == 'down'){
								this.dataList = res.data.concat(this.dataList);
							}
						}
						pullScroll.success();
					})
				}, 500);
			},
			//	搜索实时刷新
			inputSearch(e){
				// 实时刷新 清空 refreshType arrivalTime 两个参数
				this.parame.keyword = e.detail.value;
				this.parame.refreshType = '';
				this.parame.arrivalTime = '';
				//	请求数据
				customerList(this.parame).then((res)=>{
					if(res.data !== '' && res.data !== undefined){
						this.dataList = res.data;
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page,
	.patient-content{
		height: 100%;
	}
	.patient-search{
		background-color: white;
		padding: 30rpx;
		border-bottom:2rpx solid #CCCCCC;
		
		.patient-search-box{
			background-color: #F1F1F1;
			display: flex;
			align-items:center;
			
			.cuIcon-search{
				text-align:center;
				width:80rpx;
				font-size:30rpx;
				color:#b5b4b2;
			}
			
			.input-search{
				height: 60rpx;
				width: 100%;
			}
		}
	}
	
	.patient-box{
		background-color:white;
		border-radius:5rpx;
		padding:20rpx 20rpx 0;
		height:calc(100% - 124rpx);
		overflow:auto;
		
		.patient-box-item{
			border-bottom:1rpx solid #eeeeee;
			padding:25rpx 10rpx;
			color:#868686;
			
			.patient-item-portrait{
				width: 140rpx;
				image{
					width: 100rpx;
					height: 100rpx;
				}
			}
			
			.patient-item-information{
				flex: 1;
				line-height:50rpx;
				
				.nameAge{
					color: black;
					flex: 1;
				}
			}
		}
		
		.patient-box-item-bottom{
			padding:10rpx 15rpx 0;
			color: #686868;
		}
	}
</style>
